<template>
  <a-card
    class="general-card"
    title="快捷操作"
    :header-style="{ paddingBottom: '0' }"
    :body-style="{ padding: '24px 20px 0 20px' }"
  >
    <!--    <template #extra>-->
    <!--      <a-link>管理</a-link>-->
    <!--    </template>-->
    <a-row :gutter="8">
      <a-col v-for="link in links" :key="link.text" :span="8" class="wrapper">
        <div
          v-if="link.text === '今日签到'"
          class="link-item"
          @click="handleSign"
        >
          <div class="icon">
            <component :is="link.icon" />
          </div>
          <a-typography-paragraph class="text">
            {{ link.text }}
          </a-typography-paragraph>
        </div>
        <div
          v-else
          class="link-item"
          @click="$router.push({ name: link.pathName })"
        >
          <div class="icon">
            <component :is="link.icon" />
          </div>
          <a-typography-paragraph class="text">
            {{ link.text }}
          </a-typography-paragraph>
        </div>
      </a-col>
    </a-row>
    <a-divider class="split-line" style="margin: 0" />
  </a-card>
</template>

<script lang="ts" setup>
import { signUsingPost } from '@/service/backend/userSignController.ts';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { loginUser } = userStore;

const links = [
  { text: '首页', icon: 'icon-home', pathName: 'Dashboard' },
  { text: '个人设置', icon: 'icon-settings', pathName: 'Info' },
  { text: '统计分析', icon: 'icon-bar-chart', pathName: 'Statistic' },
  { text: '我的签到', icon: 'icon-calendar', pathName: 'SignRecord' },
  { text: '今日签到', icon: 'icon-check-square' }
];

const handleSign = async () => {
  try {
    const res = await signUsingPost({
      userId: loginUser.id,
      signTime: Date.now()
    });
    if (res.code === 0 && res.data) {
      Message.success('签到成功');
    } else {
      Message.warning(`签到失败,${res.message}`);
    }
  } catch (e: any) {
    Message.error(`签到失败,${e.message}`);
  }
};
</script>

<style scoped lang="less"></style>
